<template>
  <el-input
    v-if="inputType"
    v-model="inputValue"
    placeholder="地区"
    readonly
    ref="inputRef"
    @focus="focusFun"
  ></el-input>
  <el-dialog
    v-model="dialogVisible"
    title="地区"
    width="40%"
    :before-close="handleClose"
  >
    <div class="area-dialog">
      <div class="left">
        <div class="left-title">
          <el-checkbox v-model="checkCountry" :indeterminate="isIndeterminate" @change="countryFun">
            全国
          </el-checkbox>
        </div>
        <div class="left-box">
          <div class="left-item" v-for="item in treeData">
            <el-checkbox v-model="item.checkAll" :indeterminate="item.isIndeterminate" @change="handler(item)">
            </el-checkbox>
            <span @click="selecthandler(item)" :class="selectProvince.id == item.id ? 'select-data' : ''">
              {{ item.name }}
            </span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-title">{{ selectProvince.name }}</div>
        <div class="right-box">
          <div class="right-item" v-for="ele in selectProvince.sub">
            <el-checkbox v-model="ele.check" @change="selectItem(ele)">
              {{ ele.name }}</el-checkbox
            >
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { listApi as areaApi } from "@/plugins/api/shopping/area";
const props = defineProps({
  cityArr: {
    type: Array,
    default: [],
  },
  inputType: {
    type: Boolean,
    default: true,
  },
});
let inputValue = computed(() => {
  if (props.cityArr.length == 0) {
    return "";
  } else if (props.cityArr.length == 1) {
    return props.cityArr[0].name;
  } else {
    let arr = props.cityArr.map((item) => {
      return item.name;
    });
    let name = arr[0];
    let length = arr.length - 1;
    return `${name} +${length}`;
  }
});
let inputRef = ref(null);
function focusFun() {
  initFun(props.cityArr);
  inputRef.value.blur();
}

let title = ref("");
let dialogVisible = ref(false);
let selectProvince = ref({});
// 全国
let checkCountry = ref(false);
let isIndeterminate = ref(false);
function countryFun(data) {
  if (data) {
    treeData.value.forEach((item) => {
      item.checkAll = true;
      item.sub.forEach((ele) => {
        ele.check = true;
      });
    });
  } else {
    treeData.value.forEach((item) => {
      item.checkAll = false;
      item.sub.forEach((ele) => {
        ele.check = false;
      });
    });
  }
}

// 选择省份
function handler(data) {
  selectProvince.value = data;
  if (data.checkAll) {
    data.sub.forEach((item) => {
      item.check = true;
    });
  } else {
    data.sub.forEach((item) => {
      item.check = false;
    });
  }
  selectProvince.value.isIndeterminate = false;
}
// 点击省份
function selecthandler(data) {
  selectProvince.value = data;
}
// 选择市/区
function selectItem(data) {
  if (
    selectProvince.value.sub.every((item) => {
      return item.check;
    })
  ) {
    // console.log("全选");
    selectProvince.value.checkAll = true;
    selectProvince.value.isIndeterminate = false;
  } else if (
    selectProvince.value.sub.every((item) => {
      return !item.check;
    })
  ) {
    // console.log("全不选");
    selectProvince.value.checkAll = false;
    selectProvince.value.isIndeterminate = false;
  } else {
    // console.log("半选");
    selectProvince.value.checkAll = false;
    selectProvince.value.isIndeterminate = true;
  }
  if (
    treeData.value.some((item) => {
      return item.isIndeterminate;
    })
  ) {
    setTimeout(() => {
      checkCountry.value = false;
      isIndeterminate.value = true;
    });
  }
  // console.log(selectProvince.value);
}

function handleClose() {
  dialogVisible.value = false;
}

function initFun(arr) {
  selectProvince.value = {};
  treeData.value = [];
  dialogVisible.value = true;
  getData().then(() => {
    treeData.value.forEach((item) => {
      if (item.sub) {
        item.sub.forEach((ele) => {
          if (
            arr.some((e) => {
              return e.id == ele.id;
            })
          ) {
            ele.check = true;
          } else {
            ele.check = false;
          }
        });
      }
      //
      if (
        item.sub.every((item) => {
          return item.check;
        })
      ) {
        item.checkAll = true;
        item.isIndeterminate = false;
      } else if (
        item.sub.every((item) => {
          return !item.check;
        })
      ) {
        item.checkAll = false;
        item.isIndeterminate = false;
      } else {
        item.checkAll = false;
        item.isIndeterminate = true;
      }
    });
  });
}

// 地区数据
let treeData = ref([]);
function getData() {
  return new Promise((resolve, reject) => {
    areaApi({}).then((data) => {
      treeData.value = data;
      resolve();
    });
  });
}
watch(
  () => treeData.value,
  (newValue, oldValue) => {
    if (
      treeData.value.every((item) => {
        return !item.checkAll;
      })
    ) {
      //   console.log("全不选");
      checkCountry.value = false;
      isIndeterminate.value = false;
    } else {
      // console.log("半选");
      if (
        treeData.value.every((item) => {
          return item.checkAll;
        })
      ) {
        // console.log(22222);
        isIndeterminate.value = false;
        checkCountry.value = true;
      } else {
        // console.log(333333);
        isIndeterminate.value = true;
      }
    }
  },
  { deep: true }
);
const emit = defineEmits(["submitArea"]);
// 确认
function submit() {
  let arr = [];
  treeData.value.forEach((item) => {
    if (item.sub) {
      item.sub.forEach((ele) => {
        if (ele.check) {
          if (
            !arr.some((e) => {
              return e.id == ele.id;
            })
          ) {
            arr.push(ele);
          }
        }
      });
    }
  });
  emit("submitArea", arr);
  dialogVisible.value = false;
}
defineExpose({
  initFun,
});
onMounted(() => {
  // getData();
});
</script>
<style scoped lang="scss">
.area-dialog {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .left {
    width: 50%;
    border-right: 1px solid rgb(175, 171, 171);
    box-sizing: border-box;

    .left-box {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin-top: 10px;

      .left-item {
        width: calc(100% / 3);
        margin-bottom: 10px;

        :deep(.el-checkbox) {
          vertical-align: middle;
        }

        span {
          vertical-align: middle;
          margin-left: 5px;
          cursor: pointer;

          &:hover {
            color: #409eff;
          }
        }

        .select-data {
          color: #409eff;
        }
      }
    }
  }

  .right {
    width: 50%;
    padding: 10px;

    .right-title {
      font-size: 16px;
      font-weight: 600;
    }

    .right-box {
      margin-top: 10px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .right-item {
        width: calc(100% / 2);
        margin-bottom: 10px;

        :deep(.el-checkbox__label) {
          white-space: pre-wrap;
        }
      }
    }
  }
}
</style>
